<template>
	<view class="page-box">
		<uni-cusTitle title='我的优惠券' :isIcon='true'></uni-cusTitle>
		<view class="bg-box"> <image :src="`${staticUrl}mine/bg_youhui.png`" mode="scaleToFill"></image> </view>

		<view class="content-box">
			<view class="menu-box">
				<view class="item-menu" v-for="(item,index) in menuList" :key='index'>
					<view :class="current==index?'active':''" @click="menuTap(index)">{{item.name}}</view>
				</view>
			</view>
			
			<view class="list-box">
				<template v-if="list.length>0">
					<view class="item-box" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
						<image class="wh100" src="/static/mine/border01.png"></image>
						<view class="left">
							<view class="top">
								<text>￥</text>
								<view>{{item.price}}</view>
							</view>
							<text>{{item.text1}}</text>
						</view>
						<view class="right">
							<view class="s-left">
								<text>{{item.title}}</text>
								<view>{{item.time}}</view>
							</view>
							<view class="s-right" v-if="current==0" @click.stop="showMask">去使用</view>
							<view class="s-right1" v-if="current==1">
								<image class="wh100" src="/static/mine/dui.png"></image>
							</view>
							<view class="s-right1" v-if="current==2">
								<image class="wh100" src="/static/mine/shi.png"></image>
							</view>
						</view>
					</view>
			
					<view class="no-box" v-if="isMore">无更多数据了...</view>
				</template>
				<template v-else>
					<uni-empty tips="'暂无数据...'"></uni-empty>
				</template>
			</view>
		</view>
		
		<!-- 弹框 -->
		<uni-popup ref="popup" background-color="transparent" mask-background-color='rgba(0,0,0,.7)'>
			<view class="popup-content">
				<image src="http://www.qidoer.com/xcx/static/index/bg01.png"></image>
				
				<view class="title">
					<view>天生桥景区优惠券</view>
					<text>（有效期至2024.12.12）</text>
				</view>
				<view class="price">
					<view class="num">
						90
						<text>元</text>
					</view>
					<text class="tip">满100元可用</text>
				</view>
				<view class="bottom">
					<view class="daka-btn" @click="hideMaska">
						<text>立即使用</text>
					</view>
					<text class="ok"  @click="hideMask">好的，知道了</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$base.staticUrl,
				current: 0,
				menuList: [{
						name: '待使用'
					},
					{
						name: '已使用'
					},
					{
						name: '已失效'
					}
				],

				isMore: true,
				list: [{
						price: 30,
						text1: '满100减30元',
						title: '天生桥景区优惠券',
						time: '有效期至2024.12.12',
						type: 0
					},
					{
						price: 30,
						text1: '满100减30元',
						title: '天生桥景区优惠券',
						time: '有效期至2024.12.12',
						type: 1
					},
					{
						price: 30,
						text1: '满100减30元',
						title: '天生桥景区优惠券',
						time: '有效期至2024.12.12',
						type: 2
					}
				]
			}
		},

		onLoad() {

		},
		methods: {
			menuTap(index) {
				this.current = index
			},
			
			showMask() {
				this.$refs.popup.open('center')
			},
			hideMask(){
				this.$refs.popup.close()
			},
			hideMaska(){
				uni.navigateTo({
					url:'./huiDetail?id='
				})
			},
			toDetail(item){
				// if(this.current == 0){
				// 	if(item.type == 0){
						
				// 	}else{
						
				// 	}
				// }else{
				// 	uni.showToast({
				// 		title: '不能使用',
				// 		icon: 'none'
				// 	})
				// }
				
				uni.navigateTo({
					url:'./huiDetail?id='+item.id+'&type='+item.type
				})
				
			}
		},

		// 触底加载
		onReachBottom() {
			if (!this.isMore) {
				// this.getList()
			}
		},

		// 下拉刷新
		onPullDownRefresh() {
			// this.pages = 1
			// this.list = []
			// this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.bg-box{
		width:100%;
		height:260rpx;
		overflow: hidden;
		image{
			width:100%
		}
	}
	
	.content-box{
		width:100%;
		background: #FAEDFC;
		border-top-right-radius: 80rpx;
		padding-top:42rpx;
		margin-top:-86rpx;
		position: relative;
		z-index: 10;
	}

	.menu-box {
		width: 690rpx;
		height: 72rpx;
		margin: 0rpx auto 36rpx;
		background: #884FFF;
		border-radius: 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 4rpx solid #884FFF;

		.item-menu {
			width: 220rpx;
			height: 100%;
			color: #fff;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;

			view {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.active {
				width: 226rpx;
				height: 72rpx;
				background: #FFDD57;
				border-radius: 36rpx;
				color: #884FFF
			}
		}
	}

	.list-box {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		.item-box {
			width: 100%;
			height: 160rpx;
			position: relative;
			display: flex;
			margin-bottom: 30rpx;

			image {
				position: absolute;
				left: 0;
				top: 0
			}

			.left {
				width: 160rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				position: relative;
				padding: 20rpx 0;
				box-sizing: border-box;
				font-weight: bold;

				.top {
					display: flex;
					align-items: flex-end;

					text {
						font-size: 36rpx;
						margin-bottom: 2rpx;
					}

					view {
						font-size: 52rpx;
					}
				}

				text {
					font-size: 23rpx;
				}
			}

			.right {
				flex: 1;
				height: 100%;
				position: relative;
				padding: 20rpx 30rpx 20rpx 46rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.s-left {
					width: 300rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;

					text {
						font-size: 35rpx;
						font-weight: bold;
						color: #002A3A;
						line-height: 56rpx;
					}

					view {
						font-size: 28rpx;
						font-weight: bold;
						color: #3A525E
					}
				}

				.s-right {
					width: 132rpx;
					height: 56rpx;
					background: #FFDD57;
					border-radius: 48rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					font-size: 28rpx;
					font-weight: bold;
					color: #884FFF;
				}

				.s-right1 {
					width: 124rpx;
					height: 108rpx;
					position: absolute;
					right: 5rpx;
					top: 5rpx;
					overflow: hidden;
				}
			}
		}
	}
	
	.popup-content {
		width: 558rpx;
		height: 802rpx;
		position: relative;
	
		image {
			width: 100%;
			height:100%;
		}
		
		.title {
			width: 100%;
			height:130rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 550rpx;
			left: 0;
			font-size: 26rpx;
			color: #3A525E;
			view{
				font-size: 36rpx;
				font-weight: bold;
				color: #002A3A;
				line-height: 60rpx;
			}
		}
		.price {
			width: 100%;
			height:250rpx;
			position: absolute;
			bottom: 290rpx;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.num {
				width: 154rpx;
				font-weight: bold;
				font-size: 128rpx;
				font-family: AaHouDiHei;
				position: relative;
				color: #FD4A5C;
				text {
					display: inline-block;
					width: 64rpx;
					height: 64rpx;
					background: #FFF5CE;
					text-align: center;
					line-height: 64rpx;
					position: absolute;
					right: -20rpx;
					bottom: 20rpx;
					
					font-size: 30rpx;
					color: #FD4A5C;
					text-shadow: 0px 0px 0px #FFDD57;
					border-radius: 50%;
				}
			}
			.tip{
				font-size: 30rpx;
				font-weight: bold;
				color: #3A525E;
			}
		}
		.bottom {
			width: 100%;
			height:250rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.daka-btn {
				width: 494rpx;
				height: 96rpx;
				background: #FFDD57;
				border-radius: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			
				font-size: 36rpx;
				font-weight: bold;
				color: #884FFF;
			
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}
			.ok{
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-top:36rpx
			}
		}
	}
</style>